<template>
    <div class="content-notification">
        <h4 class="notification-title">通知列表</h4>
        <div class="notification-list">
            <div
                class="notice-list"
                v-for="item in pageMessageList"
                :key="item.messageId"
            >
                <div class="notice-img">
                    <img src="../../../../assets/workAvatar.png" />
                </div>
                <div class="notice-info">
                    <p>
                        <span v-html="item.message"></span>
                        <span v-if="item.detailUrl">，</span>
                        <span
                            v-if="item.detailUrl"
                            @click="showDetail($event,item.detailUrl,item.messageId)"
                        >点击查看详情</span>
                    </p>
                    <p>{{item.createTime}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { changeTime } from '@/utils/index'
export default {
  name: '',
  data() {
    return {
      pageMessageList: [
        {
          messageId: '66167',
          userOa: 'fusuoxia01',
          message:
                        '王永超的员工自评与主管评价已提交，请确认评审材料是否合规',
          detailUrl: 'staffmanagement',
          urlimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg',
          readState: 0,
          createTime: '2020-08-06 18:36:38'
        },
        {
          messageId: '66093',
          userOa: 'fusuoxia01',
          message: '朱俊宇的评审结果已确认，立即查看',
          detailUrl: 'staffmanagement',
          urlimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg',
          readState: 0,
          createTime: '2020-08-04 21:46:58'
        },
        {
          messageId: '66090',
          userOa: 'fusuoxia01',
          message: '冯莹的评审结果已确认，立即查看',
          detailUrl: 'staffmanagement',
          urlimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg',
          readState: 0,
          createTime: '2020-08-04 21:46:52'
        },
        {
          messageId: '66087',
          userOa: 'fusuoxia01',
          message: '王玉宝的评审结果已确认，立即查看',
          detailUrl: 'staffmanagement',
          urlimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg',
          readState: 0,
          createTime: '2020-08-04 21:46:44'
        },
        {
          messageId: '66084',
          userOa: 'fusuoxia01',
          message: '刘欣的评审结果已确认，立即查看',
          detailUrl: 'staffmanagement',
          urlimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg',
          readState: 0,
          createTime: '2020-08-04 21:46:38'
        }
      ]
    }
  },
  components: {},
  methods: {},
  mounted() {
    this.pageMessageList.map((item) => {
      item.createTime = changeTime(item.createTime)
    })
  }
}
</script>

<style lang="scss" scoped>
    .notification-list {
        width: 100%;
        height: 366px;
        overflow: auto;
        .notice-list {
            width: 100%;
            // height: 366px;
            // overflow: auto;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(240, 242, 245, 1);
            display: flex;
            img {
                display: block;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin: 24px 0 0 22px;
            }
            .notice-info {
                margin: 20px 0 0 15px;
                // cursor: pointer;
                p:nth-child(1) {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(127, 143, 164, 1);
                    line-height: 22px;
                    padding-right: 10px;
                    span:nth-child(3) {
                        color: #0364ff;
                    }
                    span:nth-child(3):hover {
                        cursor: pointer;
                        background: #EEF8FF;
                        text-decoration: underline
                    }
                }
                .notice-message {
                    color: #354052 !important;
                }
                p:nth-child(2) {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(127, 143, 164, 1);
                    line-height: 20px;
                }
            }
        }
        .notice-list:hover {
            background: #EEF8FF;
        }
    }
</style>
